import { PageContainer, ProTable } from "@ant-design/pro-components";
import { Button, Modal, Input, Form, Space, Popconfirm, message } from "antd";
import { connect } from "umi";
import { namespace, calcColumns } from "./configFile";
import { useRef, useState } from "react";
import { history } from "umi";
import Https from "@/utils/Https";
import { PlusOutlined } from "@ant-design/icons";
const Page = () => {
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const [form] = Form.useForm();
  const actionRef = useRef();
  const [selectKeys, setSelectRowKeys] = useState([]);
  //获取模板列表
  const getList = async (params) => {
    setLoading(true);
    let res: any = await Https.post(
      "/merchant/bookclassflowtemplate/templateList",
      params,
      true
    );
    setLoading(false);
    let records = [];
    let total = 0;
    if (res.code == 200 && res.data) {
      records = res.data.records;
      total = res.data.total;
    }
    return {
      success: true,
      data: records,
      total,
    };
  };
  const deleteCard = async (ids) => {
    let res: any = await Https.post(
      "/merchant/bookclassflowtemplate/deleteTemplate",
      ids,
      true
    );
    if (res.code == 200) {
      message.success("删除成功");
      actionRef.current && actionRef.current.reload();
    } else {
      message.error(res.msg);
    }
  };
  const operate = {
    title: "操作",
    fixed: "right",
    dataIndex: "operator",
    align: "center",
    hideInSearch: true,
    render: (_, record) => {
      return (
        <>
          <a
            onClick={() => {
              history.push(`/system/details/${record.id}`);
            }}
          >
            编辑
          </a>
          <Popconfirm
            title={`确定要删除${record.templateName}模板吗?`}
            onConfirm={() => {
              deleteCard([record.id]);
            }}
          >
            <a style={{ color: "red", marginLeft: "20px" }}>删除</a>
          </Popconfirm>
        </>
      );
    },
  };
  const submitForm = async () => {
    const res = await form.validateFields();
    let result: any = await Https.post(
      "/merchant/bookclassflowtemplate/addTemplate",
      res,
      true
    );
    if (result.code == 200) {
      message.success("操作成功");
      setOpen(false);
      actionRef.current && actionRef.current.reload();
    } else {
      message.error(result.msg);
    }
  };
  //获取选中的列
  const rowSelectChange = (selectedRowKeys, selectedRows, info) => {
    setSelectRowKeys(selectedRowKeys);
  };
  return (
    <PageContainer>
      <ProTable
        rowKey="id"
        actionRef={actionRef}
        pagination={{
          showSizeChanger: true,
        }}
        loading={loading}
        rowSelection={{
          onChange: rowSelectChange,
        }}
        tableAlertOptionRender={() => {
          return (
            <Popconfirm
              title={`确定要删除选中的模板吗?`}
              onConfirm={() => {
                deleteCard(selectKeys);
              }}
            >
              <a>批量删除</a>
            </Popconfirm>
          );
        }}
        toolBarRender={() => [
          <Button
            key="add"
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              form.resetFields();
              setOpen(true);
            }}
          >
            新增预约模板
          </Button>,
        ]}
        request={async (params) => {
          return await getList(params);
        }}
        //scroll={{ x: 1500 }}
        columns={calcColumns({ operate })}
      />

      <Modal
        open={open}
        title="新增模版"
        forceRender
        width={800}
        destroyOnClose={true}
        onCancel={() => setOpen(!open)}
        footer={
          <Space>
            <Button onClick={() => setOpen(false)}>取消</Button>
            <Button
              onClick={() => {
                submitForm();
              }}
              loading={loading}
              type="primary"
            >
              确定
            </Button>
          </Space>
        }
      >
        <Form form={form} labelCol={{ span: 5 }} wrapperCol={{ span: 16 }}>
          <Form.Item
            label="模版名称"
            name="templateName"
            rules={[{ required: true, message: "模版名称不能为空" }]}
          >
            <Input placeholder="请输入模板名称" />
          </Form.Item>
        </Form>
      </Modal>
    </PageContainer>
  );
};

export default connect((state) => ({
  ...state[namespace],
  submitLoading: state.loading.effects[`${namespace}/submitItem`],
}))(Page);
